<template>
  <div>
    <lay-table
      :columns="columns"
      id="id"
      :dataSource="dataSource"
      :default-toolbar="false"
      class="tables"
    >
      <template v-slot:menu="{ data }">
        <div
          v-for="(rows, index) in data.pageUrls"
          style="display: block; width: 100%"
        >
          <div>
            {{ rows.name }}
          </div>
        </div>
      </template>
      <template v-slot:model="{ data }">
        <div
          v-for="(item, index) in data.apiUrls"
          :key="index"
          style="display: block; width: 100%"
        >
          <div>
            {{ item.name }}
          </div>

        </div>
      </template>
      <!-- <template v-slot:age="{ data }">
        <lay-tag type="primary" v-if="!data.isPage">
          {{ data.name }}
        </lay-tag>
      </template>
      <template v-slot:operator="{ data }">
        <lay-checkbox
          name="like"
          skin="primary"
          v-model="data.selected"
          :value="data.id"
          label="查看"
        ></lay-checkbox>
      </template>
      <template v-slot:look="{ data }">
        <lay-checkbox
          name="like"
          skin="primary"
          v-model="data.radio"
          :value="data.id"
          label="操作"
        ></lay-checkbox>
      </template> -->
      <template v-slot:user="{ data }">
        <div v-if="data.persons && data.persons.length">
          <div
            v-for="(item, index) in data.persons.split(',')"
            :key="index"
            class="item_name"
          >
            <lay-tag
              type="primary"
              variant="light"
              color="#165DFF"
            >
              {{ item }}
            </lay-tag>
          </div>
        </div>

      </template>
    </lay-table>

    <!-- <div class="menus">
      <div class="left_tab">
        <div class="header">菜单</div>
        <div v-for="(item, index ) in dataSource" :key="index">
          <div v-if="item.isPage">
            <lay-checkbox
            name="like"
            skin="primary"
            v-model="item.radio"
            :value="item.id"
            label=""
          ></lay-checkbox> {{item.name}}
          </div>
        </div>
      </div>

      <div class="right_box">
        <div class="header">功能</div>
        <div v-for="(item, index ) in dataSource" :key="index">
          <div v-if="!item.isPage && !item.remark.length">
            <lay-checkbox
            name="like"
            skin="primary"
            v-model="item.radio"
            :value="item.id"
            label=""
          ></lay-checkbox> {{item.name}}
          </div>
        </div>
      </div>
    </div> -->

  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, ref } from "vue";
export default defineComponent({
  name: "App",
  props: ["dataSource"],
  setup() {
    const columns = [
      {
        title: "菜单",
        customSlot: "menu",
      },
      {
        title: "模块",
        customSlot: "model",
      },
      // {
      //   title: "功能",
      //   customSlot: "age",
      // },
      // {
      //   title: "操作",
      //   customSlot: "operator",
      // },
      // {
      //   title: "查看",
      //   customSlot: "look",
      // },
      {
        title: "人员",
        customSlot: "user",
      },
    ];

    const defaultToolbar = ref(true);

    return {
      columns,
      defaultToolbar,
    };
  },
});
</script>
<style>
.tables .layui-table-cell div {
  display: inline-block !important;
}
</style>
<style lang="scss" scope>
.item_name {
  display: inline-block;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 8px;
  margin-right: 8px;
}

.layui-checkbox[size="md"]
  .layui-form-checkbox[lay-skin="primary"]
  .layui-checkbox-label {
  margin-left: 28px;
}

.menus {
  display: flex;
  .header {
    width: 500px;
    background: #eee;
  }
  .left_tab {
  }

  .right_box {
  }
}

.box_border {
  width: 100%;
  display: block;
  padding-bottom: 8px;
  padding-top: 8px;
  border-bottom: 1px solid #eee;
}

.list_table {
  margin-left: 40px;
}
</style>